<template>
  <div class="message">
    <div class="header">
      <p>热门话题</p>
      <img src="https://gw.alicdn.com/tfs/TB1todsX79E3KVjSZFGXXc19XXa-33-18.png" alt>
    </div>
    <div class="message-list">
      <div v-for="(item,index) in topicType" :key="index" class="img-list" @click="openLink(item)">
        <img class="image" :src="item.file_path" width="100%" alt>
        <!-- <p class="text-box">#{{item.articletype_name | text}}#</p> -->
      </div>
    </div>
  </div>
</template>

<script>
import { article_listAllArticletype } from "@/api/article";
export default {
  name: "OtherItem",
  data() {
    return {
      listQuery: {
        start: 0,
        current: 1,
        limit: 8,
        company_id: localStorage.getItem("companyId") - 0
      },
      dataList: [],
      topicType: []
    };
  },
  methods: {
    openLink(item) {
      this.$router.push({
        path: "/topicType",
        query: {
          id: item.id,
          name: item.articletype_name,
          banner_path: item.file_path,
          nameLink: "articleAdd"
        }
      });
    },
    async topic() {
      //获取话题
      let { data } = await article_listAllArticletype();
      if (data.status == 100) {
        this.topicType = data.data.rows;
      }
    },
    async initList() {
      let query = Object.assign({}, this.listQuery);
      let res = await getListPortalTops(query);
      let result = res.data;
      if (result.status == 100) {
        this.dataList = result.data.rows;
      }
    }
  },
  created() {
    setTimeout(() => {
      this.topic();
    }, 1000);
  }
};
</script>

<style lang="scss" scoped>
.message {
  font-family: PingFangSC-Medium;
  font-size: 18px;
  font-weight: 600;
  color: #3a3a3a;
  .header {
    background-color: #fff;
    padding: 7px;
    display: flex;
    align-items: flex-start;
    font-size: 18px;
    line-height: 18px;
    img {
      width: 22px;
      height: 12px;
      margin-left: 6px;
    }
  }
  .message-list {
    margin: 10px 7px;
    display: -webkit-box;
    overflow: scroll;
    .img-list {
      position: relative;
      margin-right: 11px;
      width: 175px;
      overflow: hidden;
      text-align: center;
    }
    .image {
      width: 100%;
      border-radius: 4px;
    }
    .text-box {
      width: 100%;
      position: absolute;
      left: 50%;
      bottom: 10px;
      transform: translateX(-50%);
      text-align: center;
      font-size: 12px;
      color: #fff;
    }
  }
}
</style>
